<template>
  <div>
    <van-nav-bar :title="title" left-arrow @click-left="onClickLeft" fixed placeholder />
    <van-cell class="address" is-link @click="showPopup">{{ caddress }}</van-cell>
    <van-popup v-model="show" position="left">
      <van-sidebar v-model="activeKey" @change="onChange">
        <!-- <van-sidebar-item title="定位城市:" /> -->
        <van-sidebar-item :title="item" v-for="(item, i) in address" :key="i" />
      </van-sidebar>
    </van-popup>
    <van-cell class="md" title="龙华大唐时代店" is-link value="距离1km" />
    <van-dropdown-menu active-color="#ff6040">
      <van-dropdown-item v-model="value1" :options="option1" />
      <van-dropdown-item title="上课时间">
        <van-cell center title="日期(单选)"></van-cell>
        <button>工作日</button><button>周末</button><button>全周</button>
        <van-cell center title="时段(多选)"> </van-cell>
        <button>早上7-11点</button><button>中午11-13点</button><button>下午13-17点</button> <button>傍晚17-19点</button><button>晚上19-21点</button><button>夜间21-24点</button>
        <div><button class="b-left">重置</button><button class="b-right">确定</button></div>
      </van-dropdown-item>
      <van-dropdown-item title="筛选">
        <van-cell center title="训练期望(单选)"></van-cell>
        <button>瘦身塑形</button><button>增重增肌</button><button>体能提升</button> <button>新人入门</button><button>伤病恢复</button><button>体态调整</button>
        <van-cell center title="性别(单选)"> </van-cell>
        <button>男</button><button>女</button>
        <van-cell center title="行业认证(多选)"> </van-cell>
        <button>国际四大认证</button><button>国内认证</button>
        <van-cell center title="从业年限(单选)"> </van-cell>
        <button>0-3年</button><button>3-5年</button><button>5年以上</button>
        <div><button class="b-left">重置</button><button class="b-right">确定</button></div>
      </van-dropdown-item>
    </van-dropdown-menu>
    <div class="card" v-for="(item, i) in card" :key="i">
      <div class="protrait"><img :src="card[i].img" alt="" /></div>
      <div class="text">
        <p>
          <span>{{ card[i].title }}</span>
          <span>
            <span>¥</span>
            <span>{{ card[i].price }}</span>
            <span>/节起</span>
          </span>
        </p>
        <p>{{ card[i].ct1 }}</p>
        <p><button>店长推荐</button><button>自由约</button></p>
        <p>
          <button v-for="(item2, j) in card[i].tag" :key="j">{{ card[i].tag[j] }}</button>
        </p>
        <p>{{ card[i].ct2 }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Coachdetails',

  data() {
    return {
      title:'私人教练',
      show: false,
      activeKey: 0,
      caddress: '深圳市',
      address: ['北京市', '上海市', '深圳市', '南京市', '杭州市', '济南市', '武汉市', '重庆市', '广州市', '成都市', '苏州市', '长沙市', '郑州市', '宁波市', '福州市', '无锡市', '青岛市', '昆明市', '东莞市', '天津市', '佛山市', '西安市'],
      value1: 0,
      value2: 0,
      option1: [
        { text: '默认排序', value: 0 },
        { text: '低价优先', value: 1 },
        { text: '好评优先', value: 2 },
        { text: '上课数最多', value: 3 }
      ],
      card: [
        {
          title: '皮卡',
          price: '220',
          img: require('../../assets/coach/皮卡.jpg'),
          ct1: '好评率98.0% | 累计上课439节',
          tag: ['增肌', '拉伸', '减脂', '塑形'],
          ct2: '2016年初入行做健身教练至今，学习跆拳道10年。舞蹈(舞龄)5年 运动宣言:一切的焦虑都来源于你不够努力，要么幻想要么行动！ 证书: CBBA中国健美协会高级私人教练 IFBB国际身体阻力与体适能'
        },
        {
          title: '小邱',
          price: '300',
          img: require('../../assets/coach/小邱.jpg'),
          ct1: '好评率91.0% | 累计上课648节',
          tag: ['增肌', '减脂', '塑形'],
          ct2: '健身差不多八年 广州大学学士学位 社会体育指导与管理专业 康比特运动品牌推广大使 健身模特 篮球运动员 游泳教练 老师 篮球专项，健身专项'
        },
        {
          title: '林徭杰',
          price: '260',
          img: require('../../assets/coach/林徭杰.jpg'),
          ct1: '好评率91.0% | 累计上课857节',
          tag: ['增肌', '减脂', '塑形'],
          ct2: '大学毕业就在北京当教练4年，到目前为止第5年了。中小学时期自己是个胖子，为了减肥参加过一段时间长跑。逐渐养成了爱运动的习惯并且萌生了一个运动的想法，成为一名优秀的职业教练，在我的职业生涯里不断去帮助身边的家人和朋友。'
        },
        {
          title: '阿昆',
          price: '260',
          img: require('../../assets/coach/阿昆.jpg'),
          ct1: '好评率93.0% | 累计上课944节',
          tag: ['增肌', '减脂', '塑形'],
          ct2: 'ACE美国运动委员会认证私教 毕业于湖南科技大学 正确的看待健身，能让我们更好的坚持： 运动应当是增进健康的手段，而不是作为午餐吃太多的惩罚，我们的最终目标是为了改善生活质量，养成健康的生活习惯，而不是仅仅为了减肥或外貌好看的必须要做的令人痛苦的事情。 相信你你自己，加油！'
        },
        {
          title: '俊森',
          price: '280',
          img: require('../../assets/coach/俊森.jpg'),
          ct1: '好评率92.33% | 累计上课1892节',
          tag: ['增肌', '减脂', '塑形', '体态调整'],
          ct2: '毕业于赛普健身体育学院 高级私人教练 从事健身行业5年 健体运动员'
        },
        {
          title: '杰西儿',
          price: '280',
          img: require('../../assets/coach/杰西儿.jpg'),
          ct1: '好评率91.0% | 累计上课880节',
          tag: ['体态调整', '减脂', '塑形', '增肌'],
          ct2: '大学毕业就在北京当教练4年，到目前为止第5年了。中小学时期自己是个胖子，为了减肥参加过一段时间长跑。逐渐养成了爱运动的习惯并且萌生了一个运动的想法，成为一名优秀的职业教练，在我的职业生涯里不断去帮助身边的家人和朋友。'
        }
      ]
    }
  },

  mounted() {},

  methods: {
    showPopup() {
      this.show = true
    },
    onChange(index) {
      this.caddress = this.address[index]
      this.show = false
    },
    onClickLeft() {
      this.$router.go(-1)
    },
  }
}
</script>

<style lang="less" scoped>
/deep/ .address {
  .van-cell__value {
    flex: 0 1 auto;
  }
  .van-icon-arrow:before {
    transform: rotate(90deg) scale(0.5);
  }
}
/deep/.van-sidebar {
  width: 90px;
}
.md {
  .van-cell__title {
    flex: 0 1 30%;
  }
  .van-cell__value {
    flex: 0 1 20%;
  }
}
/deep/ .van-dropdown-menu {
  button {
    font-size: 14px;
    padding: 4px 0px;
    margin: 6px 6px;
    width: 110px;
    border-radius: 20px;
    border: none;
    background: #f7f8fc;
    color: #a7aab6;
  }
  .b-left {
    width: 46%;
    height: 40px;
    margin: 14px 6px;
    background-color: #fff;
    border-style: solid;
    border-width: 1px;
    border-color: #cccccc;
  }
  .b-right {
    width: 46%;
    height: 40px;
    margin: 14px 6px;
    color: #fff;
    background-color: #ff6040;
  }
}
.card {
  display: flex;
  padding: 12px;
  border-bottom: 1px solid #f3f3f3;
  background-color: #fff;
  .protrait {
    img {
      border-radius: 10px;
      width: 110px;
    }
  }
  .text {
    padding-left: 10px;
    p {
      margin: 0;
    }
    p:nth-child(1) {
      font-size: 16px;
      color: #333333;
      display: flex;
      justify-content: space-between;
      span:nth-child(2) {
        span:nth-child(1) {
          font-size: 10px;
          color: #ff6040;
        }
        span:nth-child(2) {
          font-weight: 600;
          color: #ff6040;
        }
        span:nth-child(3) {
          font-size: 14px;
          color: #666666;
        }
      }
    }
    p:nth-child(2) {
      margin: 4px 0px;
      font-size: 13px;
      color: #8a8697;
      margin: 4px 0px;
    }
    p:nth-child(3) {
      margin: 6px 0px;
      font-size: 10px;
      button {
        border: none;
        border-radius: 10px;
        padding: 2px 6px;
        margin-right: 6px;
      }
      button:nth-child(1) {
        color: #ff9e1d;
        background-color: #fff6d9;
      }
      button:nth-child(2) {
        color: #ff6631;
        background-color: #ffeee8;
      }
    }
    p:nth-child(4) {
      margin: 6px 0px;
      font-size: 10px;
      button {
        border-radius: 10px;
        border: none;
        padding: 0px 6px;
        margin-right: 6px;
        color: #a7aab6;
      }
    }
    p:nth-child(5) {
      margin: 6px 0px;
      font-size: 10px;
      color: #a7aab6;
      width: 230px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
</style>
